<template>
  <div ref="root" style="position: absolute; font-size: 14px" />
</template>

<script>
// Jie. 20250527 增加代码提示
import * as Completers from '@/utils/completer';
import JSBeautify from 'js-beautify';

// Jie. 20250527 增加代码提示
const DEFAULT_OPTIONS = {
  useWrapMode: false,
  tabSize: 2,
  enableSnippets: true,
  useWorker: false,
  enableLiveAutocompletion: true,
  enableBasicAutocompletion: true,
  fontSize: 14
};

export default {
  props: {
    value: {
      type: String
    },
    type: {
      type: String,
      default: 'javascript'
    },
    options: {
      type: Object,
      default: () => {
        return DEFAULT_OPTIONS;
      }
    },
    // Jie. 20250527 增加代码提示
    completer: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      editor: undefined
    };
  },
  mounted() {
    let finalOptions = {
      ...DEFAULT_OPTIONS,
      ...this.options
    };
    this.editor = window.ace.edit(this.$el);
    this.editor.getSession().setMode('ace/mode/' + this.type);
    this.editor.session.setTabSize(finalOptions.tabSize || 2);
    this.editor.session.setUseWrapMode(finalOptions.useWrapMode || false);
    const langTools = window.ace.require('ace/ext/language_tools');
    const snippetManager = window.ace.require('ace/snippets').snippetManager;
    if (Completers.customSnippet) {
      snippetManager.register(Completers.customSnippet, 'javascript');
    }

    // 自定义的代码提示
    if (Completers.thisCompleter) {
      langTools.addCompleter(Completers.thisCompleter);
    }

    // 启用代码提示
    this.editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true,
      fontSize: 14
    });

    // 监听代码变化
    this.editor.getSession().on('change', e => {
      if (e.action === 'insert' && e.lines[0] === '.') {
        // 手动触发代码提示
        this.$nextTick(() => this.editor.execCommand('startAutocomplete'));
      }
      this.$emit('input', this.editor.getValue());
    });

    this.editor.setReadOnly(finalOptions.readOnly);
    if (this.value) this.editor.setValue(this.value);

    // 添加快捷键支持
    this.editor.commands.addCommand({
      name: 'saveCommand',
      bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
      exec: editor => {
        this.$emit('save');
      }
    });

    // 如果有自定义completer，添加到编辑器
    if (this.completer) {
      this.editor.completers = [this.completer];
    }
  },
  methods: {
    // Jie. 20250527 格式化代码
    formatCode() {
      if (!this.editor) return;
      const code = this.editor.getValue();
      const beautifiedCode = JSBeautify.js_beautify(code);
      this.editor.setValue(beautifiedCode);
    }
  },
  watch: {
    value: {
      handler(newValue) {
        if (this.editor && this.editor.getValue() !== newValue) {
          this.editor.setValue(newValue || '');
          this.editor.moveCursorTo(0, 0);
        }
      },
      immediate: true
    },
    // Jie. 20250527 监听代码提示
    completer: {
      handler(newCompleter) {
        if (this.editor && newCompleter && typeof newCompleter.getCompletions === 'function') {
          const langTools = window.ace.require('ace/ext/language_tools');
          langTools.addCompleter(newCompleter);
        }
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
      this.editor.container.remove();
      this.editor = undefined;
    }
  }
};
</script>

<style></style>
